<template>
    <el-container class="code-rule-container" direction="vertical" style="margin-right: 15px;">
        <el-container>
            <HeaderBtnGroup @handleClick="handleHeaderClick" :config="headerConfig">
            </HeaderBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table :data="targets" v-loading="loadingShow">
                    <el-table-column fixed label="序号" type="index" prop="id"></el-table-column>
                    <el-table-column label="平台名称" prop="platformId">
                        <template slot-scope="scope">
                            <span>{{ showPlatformDesc(scope.row.platformId) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="规则名称" prop="name"></el-table-column>
                    <el-table-column label="规则详情" width="300">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.codeRule" v-if="checkLength(row.codeRule)">{{
                ellipsisContent(row.codeRule) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.codeRule" v-else>{{ row.codeRule }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="enable">
                        <template slot-scope="scope">
                            <span>{{ scope.row.enable ? "生效" : "失效" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
        <el-dialog :title="dialogTitle" width="66%" :visible.sync="dialogFormVisible" destroy-on-close
            @close="handleDialogClose">
            <PublishRule :rule="rule" @save="handleRuleSave" v-if="dialogFormVisible"></PublishRule>
        </el-dialog>
    </el-container>
</template>

<style lang="scss">
.code-rule-container {

    .el-dialog__header {
        padding-top: 10px !important;
    }

    .el-dialog__body {
        padding-top: 0px !important;
    }
}
</style>

<script>
import { DictDao } from "@/dao/dictDao"
import { RuleDao } from "@/dao/ruleDao"
import PublishRule from "./publishRule"
import { funcFns } from '@/puppeteer/utils/funtion'
import { HeaderBtnMixin } from "@/mixins/HeaderBtnMixin"
import { UsageScope, DictType } from "@/entities/Constant"
import HeaderBtnGroup from "@/components/Common/HeaderBtnGroup"

export default {
    name: "PublishRuleList",
    mixins: [HeaderBtnMixin],
    props: {
        type: {
            type: Number,
            default: DictType.Platform,
        },
        usageScope: {
            type: Number,
            default: UsageScope.Publisher,
        }
    },
    components: {
        PublishRule,
        HeaderBtnGroup,
    },
    data() {
        return {
            rule: {},
            targets: [],
            platforms: [],
            whereDict: {
                type: this.type,
                enable: -1,
                usageScope: this.usageScope,
            },
            maxLength: 50,
            loadingShow: true,
            dialogTitle: "添加规则",
            headerConfig: {
                pageSize: RuleDao.pageSize,
                statusBtns: [
                    { status: -1, name: "全部", key: "*" },
                    { status: 1, name: "生效", key: "enable" },
                    { status: 0, name: "失效", key: "enable" },
                ]
            }
        }
    },
    mounted() {
        DictDao.Platforms(this.type).then((res) => {
            this.platforms = res
            this.getTargets(this.page)
        })
    },
    methods: {
        getTargets(page) {
            this.loadingShow = true
            RuleDao.fetchCount(this.whereDict, page).then((res) => {
                console.log("fetchCount", res)
                this.loadingShow = false
                this.targets = res.datas
                this.headerConfig.total = res.count
            })
        },
        handleAdd() {
            console.log("handleAdd")
            this.dialogTitle = "添加规则"
            this.dialogFormVisible = true
        },
        handleStatusFilter(row) {
            if (row.key == "*") {
                this.whereDict.enable = -1;
            } else {
                this.whereDict[row.key] = row.status
            }
            this.getTargets(this.page)
        },
        handleDialogClose() {
            this.rule = {}
            this.dialogFormVisible = false
        },
        handleEdit(row) {
            this.rule = row
            this.dialogTitle = "编辑规则"
            this.dialogFormVisible = true
        },
        handleRuleSave(res) {
            console.log("handleRes", res)
            this.rule = {}
            this.dialogFormVisible = false
            this.getTargets(this.page)
        },
        handleDelete(id) {
            RuleDao.delete(id).then(res => this.getTargets(this.page))
        },
        checkLength(content) {
            if (!content) {
                return false
            }
            if (content.length < this.maxLength) {
                return false
            }
            return true
        },
        ellipsisContent(content) {
            return funcFns.ellipsisContent(content, this.maxLength)
        },
        showPlatformDesc(value) {
            let obj = this.platforms.find(obj => obj.id == value)
            return obj ? obj.name : ""
        }
    },
}
</script>